<template>
  <el-dialog
    class="dialog"
    :visible.sync="_visible"
    :title="$t('warnTitle')"
    :append-to-body="true"
    width="700px"
    :before-close="handleClose"
    :modal="false"
  >
    <div class="snapDetail-body d-flex flex-column jc-center ai-center">
      <div class="top d-flex jc-evenly ai-center">
        <MyImage class="img-box" :src="row.snap_path" />
        <div class="similarity d-flex flex-column jc-start ai-center">
          <span> {{ $t("similarity") }} </span>
          <span class="similarity-number">{{ row.similarity }}%</span>
          <span
            class="img-lib_type mt-50"
            :class="['lib_type' + row.lib_type]"
            >{{ row.lib_type | formatLibType }}</span
          >
          <span
            v-if="row.lib_type === 0 && !!row.event_type"
            class="img-lib_type lib_type0 mt-10"
            >{{ row.event_type | formatEventType }}</span
          >
        </div>
        <MyImage class="img-box" :src="row.img_path" />
      </div>
      <div class="bottom d-flex flex-1 jc-around ai-center">
        <div class="snap-info flex-1 mr-60">
          <div class="title">{{ $t("capturingFace") }}</div>
          <div>
            <span>{{ $t("channelNumber") }}</span>
            <span>{{ row.channel }}</span>
          </div>
          <div>
            <span>{{ $t("channelName") }}</span>
            <span>{{ row.camera_name }}</span>
          </div>
          <div>
            <span>{{ $t("captureDate") }}</span>
            <span>{{ row.trigger }}</span>
          </div>
        </div>
        <div class="lib-info flex-1" v-if="row.lib_type !== 0">
          <div class="title">{{ $t("compareFace") }}</div>
          <div>
            <span>{{ $t("face_nameTag") }}</span>
            <span>{{ row.person_name }}</span>
          </div>
          <div>
            <span>{{ $t("face_sexTag") }}</span>
            <span>{{ row.person_gender | formatGender }}</span>
          </div>
          <div>
            <span>{{ $t("face_ageTag") }}</span>
            <span>{{ row.person_age }}</span>
          </div>
          <div class="d-flex">
            <span>{{ $t("idCardNumber") }}</span>
            <span>{{ row.person_idcard }}</span>
            <ValidatePwdPopover
              v-if="isIdShow"
              :personInfo="row"
              @confirm="
                (res) => getEncryptInfo(res, 'person_idcard', 'isIdShow')
              "
            />
          </div>
          <div class="d-flex">
            <span>{{ $t("sys_wl_addr") }}</span>
            <span>{{ row.person_addr }}</span>
            <ValidatePwdPopover
              v-if="isAddrShow"
              :personInfo="row"
              @confirm="
                (res) => getEncryptInfo(res, 'person_addr', 'isAddrShow')
              "
            />
          </div>
          <div>
            <span>{{ $t("onLibrary") }}</span>
            <span>{{ row.lib_name }}</span>
          </div>
        </div>
        <div v-else>
          <div class="title">{{ $t("compareFace") }}</div>
          <div>
            <span>{{ $t("channelNumber") }}</span>
            <span>{{ row.channel }}</span>
          </div>
          <div>
            <span>{{ $t("channelName") }}</span>
            <span>{{ row.camera_name }}</span>
          </div>
          <div>
            <span>{{ $t("captureDate") }}</span>
            <span>{{ row.wander_trigger }}</span>
          </div>
        </div>
      </div>
      <div
        class="footer d-flex flex-column"
        v-if="row.lib_type === 0 && row.event_type === 1"
      >
        <div>
          <span>{{ $t("wander_place") }}</span>
          <span>{{ row.wander_channels }}</span>
        </div>
        <div>
          <span>{{ $t("wander_place_count") }}</span>
          <span>{{ row.appear_count }}</span>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import MyImage from "@/components/Image.vue";
export default {
  components: {
    MyImage,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      isAddrShow: true,
      isIdShow: true,
    };
  },
  computed: {
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods: {
    handleClose(done) {
      this._visible = false;
      done();
    },
    getEncryptInfo(res, key, isShowKey) {
      if (res.data.record.length) {
        this.$set(this.record, key, res.data.record[0][key]);
      } else {
        this.$message.warning(this.$t("emptyData"));
      }
      this[isShowKey] = false;
    },
  },
};
</script>
<style lang="less" scoped>
.dialog {
  z-index: 9999;
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 0;
  bottom: 0;
  margin: 0;
  .snapDetail-body {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .top {
      width: 100%;
      height: 200px;
      .similarity {
        height: 80%;
        &-number {
          color: #1e88e5;
          font-size: 34px;
        }
        .img-lib_type {
          background-color: rgba(240, 79, 86, 1);
          border-radius: 5px;
          height: 26px;
          min-width: 70px;
          text-align: center;
          line-height: 26px;
          color: #fff;
          &.lib_type2 {
            background-color: #78d57d;
          }
          &.lib_type0 {
            background-color: #6d68d3;
          }
        }
      }
      .img-box {
        border: 1px solid #e6edf2;
      }
    }
    .bottom {
      width: 100%;
      .title {
        width: 100px;
        border-radius: 5px;
        background: #ccc;
        margin: 0 auto;
        text-align: center;
      }
      div {
        line-height: 20px;
        span:first-child {
          display: inline-block;
          width: 100px;
        }
        span:second-child {
          display: inline-block;
          width: 150px;
        }
      }
      .snap-info {
        height: 100%;
      }
      .lib_info {
        height: 100%;
      }
    }
    .footer {
      width: 100%;
      margin-top: 40px;
      div {
        line-height: 20px;
        span:first-child {
          display: inline-block;
          width: 100px;
        }
        span:second-child {
          display: inline-block;
          width: 150px;
        }
      }
    }
  }
}
</style>
